<template>
  <div class="test-paper">
    <white-header
      :isShowTopNav="true"
      :isShowBack="true"
      :isShowRight="true"
      :title="paperDetail.name"
    ></white-header>
    <div class="test-container">
      <p class="paper-name">{{ paperDetail.name }}</p>
      <p class="alias-name">{{ paperDetail.subName }}</p>
      <div class="paper-info">
        <span>满分：{{ paperDetail.total }}分</span>
        <span class="line"></span>
        <span>限时：{{ paperDetail.span }}分钟</span>
        <span class="line"></span>
        <span>题目：{{ paperDetail.questionNum }}道</span>
      </div>
      <ul class="question-list">
        <li
          class="list-item"
          v-for="(item, index) in paperDetail.questions"
          :key="'paperDetail.questions' + index"
        >
          <div class="item-left">{{ item.name || formatQuestionType(item.questionType) }}（{{item.questionGroupTestQuestionList.length * item.score}}分）</div>
          <div class="item-right">共{{ item.questionGroupTestQuestionList.length }}道题</div>
        </li>
      </ul>
      <div class="start-btn" @click="startAnswering">开始考试</div>
      <p class="test-tips">*提示：中途退出考试会影响评分，请谨慎退出哦～</p>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import WhiteHeader from "~/components/mobile/WhiteHeader.vue";
import {
  getQuestionBankPaperDetail,
  getQuestionBankPaperList
} from "~/api/v2-question-bank/question-bank.js";
export default {
  components: {
    WhiteHeader
  },
  scrollToTop: true,
  data() {
    return {
      title: "试卷名称",
      paperDetail: {
        answerCount: 0,
        author: "",
        createTime: 0,
        diff: 1,
        generateType: 1,
        id: 0,
        introduce: "",
        isUse: 1,
        name: "",
        passScore: 0,
        questionGroupId: 0,
        remind: "",
        span: 0,
        subName: "",
        total: 0,
        type: 1,
        updateTime: 0,
        questions: []
      },
      questionTypeOptions:[
          {id:1,label:"单选题"},
          {id:2,label:"多选题"},
          {id:3,label:"简答题"},
          {id:4,label:"填空题"},
          {id:5,label:"判断题"},
      ],//题型选项配置
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      is_loading(state) {
        return state.is_loading;
      }
    }),
    /* 题套Id */
    questionId() {
      return this.$route.query.id;
    },
    /* 试卷Id */
    testId() {
      return this.$route.query.testId;
    },
    /* 类型（0章节练习 试卷类型 1专项训练 2模拟考试 3真题训练） */
    type() {
      return this.$route.query.type;
    }
  },
  watch: {},
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    formatQuestionType(questionType){
      let obj = this.questionTypeOptions.find(item=>item.id == questionType);
      if(obj){
        return obj.label;
      }
    },
    formatDate(timestamp) {
      let date = new Date(timestamp);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      let add0 = m => {
        return m < 10 ? "0" + m : m;
      };
      let showTime = null;
      if (new Date(timestamp).toDateString() === new Date().toDateString()) {
        if (hour < 10) {
          showTime = "上午";
        } else if (hour < 12) {
          showTime = "中午";
        } else if (hour < 18) {
          showTime = "下午";
        } else {
          showTime = "晚上";
        }
        // console.log("今天", showTime + " " + add0(hour) + ":" + add0(minute));
        return showTime + " " + add0(hour) + ":" + add0(minute);
      } else {
        // console.log("以前", add0(year) + "/" + add0(month) + "/" + add0(day));
        return add0(year) + "/" + add0(month) + "/" + add0(day);
      }
    },
    startAnswering() {
      this.$router.push({
        path: "/m/v2-answer-sheet",
        query: {
          id: this.questionId,
          type: this.type,
          testId: this.testId
        }
      });
    },
    /* 获取试卷详情 */
    async getTestPaper() {
      let result = await getQuestionBankPaperList({ id: this.testId });
      console.log("获取试卷内容：", result);
      if (result && result.data && result.data.code == 200) {
        const { rows } = result.data.data;
        if (rows.length > 0) {
          this.paperDetail = rows[0];
          this.getTestPaperDetail();
        }
        this.SET_IS_LOADING(false);
      } else {
        this.SET_IS_LOADING(false);
      }
    },
    /* 获取试卷试题 */
    async getTestPaperDetail() {
      let params = {
        questionGroupPaperId: this.testId,
        questionGroupId: this.questionId,
        questionType: this.type
      };
      let result = await getQuestionBankPaperDetail(params);
      console.log("获取试卷试题：", result);
      if (result && result.data && result.data.code == 200) {
        let originData = result.data.data;
        this.paperDetail = {
          ...this.paperDetail,
          questions: originData
        };
        this.SET_IS_LOADING(false);
      } else {
        this.SET_IS_LOADING(false);
      }
    },
    initPage() {
      this.getTestPaper();
    }
  },
  created() {
    this.initPage();
  },
  activated() {
    this.initPage();
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.test-paper {
  background-color: #f7f7fa;
  min-height: 100vh;
  width: 7.2rem;
  padding: .384rem 0;
  .test-container {
    width: 6.624rem;
    min-height: 10.176rem;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 0.192rem;
    padding: 0.4rem 0.288rem;
    .paper-name {
      width: 100%;
      font-size: 0.3072rem;
      text-align: center;
      font-weight: bold;
      color: #313233;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .alias-name {
      width: 100%;
      margin: 0.288rem 0;
      font-size: 0.288rem;
      text-align: center;
      font-weight: bold;
      color: #313233;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .paper-info {
      display: flex;
      justify-content: space-around;
      color: #939699;
      font-size: 0.2304rem;
      .line {
        display: inline-block;
        width: 1px;
        height: 0.288rem;
        background-color: #abafb3;
      }
    }
    .question-list {
      margin: 0.8rem 0;
      .list-item {
        width: 100%;
        // height: 1.0176rem;
        padding: .2rem 0;
        border-bottom: 0.02rem solid #e3e4e6;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.2688rem;
        font-weight: bold;
        color: #464c57;
        &:last-child {
          border-bottom: none;
        }
        .item-left{
          width: 76%;
        }
        .item-right{
          width: 24%;
          text-align: right;
        }
      }
    }
    .start-btn {
      width: 100%;
      height: 0.8448rem;
      line-height: 0.8448rem;
      text-align: center;
      background-color: var(--theme-color);
      border-radius: 0.4224rem;
      font-size: 0.288rem;
      color: #ffffff;
    }
    .test-tips {
      padding: 0.1rem 0.4224rem;
      color: var(--theme-color);
      font-size: 0.2304rem;
    }
  }
}
</style>
